<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Forum UI</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
	<script src="js/jquery.cookie.js"></script>

	<script>
	var login="guest"; //Current user name
	if($.cookie("login")) {
		login=$.cookie("login");
	}	
	var password="";
	if($.cookie("password")) {
		password=$.cookie("password");
	}
	var ActualUrl;
	var catid;
	var catname;
	var themeid;
	var themename;
	
//REGISTRATION----------------------------------------------------------
	//Iface
	function regSTAGE1() {
		ActualUrl="#register";
		clearMain(); //clear center of page
		document.getElementById('main').innerHTML="<h2>Register</h2><br>Login:<input type='text' id='login'><br>Password:<input type='password' id='password' value=''><br>Name:<input type='text' id='name'><br><input type='button' value='Register' onclick='regSTAGE2()'>";
		footer(); //reload footer of page
	}
	//Get And Send Data
	function regSTAGE2() {
		Rlogin=document.getElementById('login').value;
		Rname=document.getElementById('name').value;
		Rpassword=document.getElementById('password').value;
		$.get('fengine.php?req=reg&login='+Rlogin+'&name='+Rname+'&password='+Rpassword, function(data) {
			regSTAGE3(data);
		});
	}
	//Get request and go to the next stage
	function regSTAGE3(data) {
		loginSTAGE1(); //Go to login form
	}
//----------------------------------------------------------REGISTRATION
//Login-----------------------------------------------------------------
	//Iface
	function loginSTAGE1() {
		ActualUrl="#login";
		footer();
		document.getElementById('main').innerHTML="Login:<input type='text' id='login' value='guest' name='login'><br>Password:<input type='password' id='password' value='' name='password'><br><input type='button' value='enter' onclick='loginSTAGE2()'><br><br><a href='#register' onclick='regSTAGE1()'>Register</a>";
	}
	//Get And Send Data
	function loginSTAGE2() {
		login=document.getElementById('login').value;
		password=document.getElementById('password').value;
		$.cookie('login', login, { path: '/', expires: 10 });
		$.cookie('password', password, { path: '/', expires: 10 });
		
		$.get('fengine.php?login='+login+'&password='+password, function(data) {
			loginSTAGE3(data);
		});
	}
	//Get request and go to the next stage
	function loginSTAGE3(data) {
		if(data=="login error") {
			loginSTAGE1();
			document.getElementById('main').innerHTML+="<h1>Login error!</h1>";
			return;
		}
		ActualUrl="";
		document.location.hash="";
		document.getElementById('header').innerHTML="";
		header(); //display header
		getCatsSTAGE1(); //Display forum categories
		footer();
	}
//-----------------------------------------------------------------Login
//Cats------------------------------------------------------------------
	//Load cats
	function getCatsSTAGE1() {
		$.get('fengine.php?login='+login+'&password='+password+"&req=cats", function(data) {
			footer();
			clearMain();
			getCatsSTAGE2(data);
		});
	}
	//Display title, and parse resieved data
	function getCatsSTAGE2(data) {
		ActualUrl="";
		document.getElementById('main').innerHTML+="<h3>Cats</h3>";
		parseCats(data); //parse data
	}
	//Parse and display cats
	function parseCats(data) {
		//alert(data);
		var reg=/(\d+)#(.+)/; //cats reg exp
		var data_str=data.split("\n"); //split recieved cats
		for ( category in data_str ) {
			if(data_str[category]=="") break;
			var arr=reg.exec(data_str[category]);
			document.getElementById('main').innerHTML+="<a href='#cat="+arr[1]+"' onclick='getThemesSTAGE1("+arr[1]+",\""+arr[2]+"\")'>"+arr[2]+"</a><br>";
		}		
	}
//------------------------------------------------------------------Cats
//Themes----------------------------------------------------------------
	function getThemesSTAGE0(i) {
		$.get('fengine.php?login='+login+'&password='+password+"&req=catname&catid="+i, function(data) {
			getThemesSTAGE1(i,data);
		});
	}
	//Get themes from selected cat
	function getThemesSTAGE1(i,name) {
		ActualUrl="#cat="+i;
		footer();
		catid=i; //set current cat id
		catname=name; //set current cat name
		$.get('fengine.php?login='+login+'&password='+password+"&req=themes&catid="+i, function(data) {
			getThemesSTAGE2(data);
		});
	}
	//Prepair place to Display and parse resieved cats
	function getThemesSTAGE2(data) {	
		clearMain();
		document.getElementById('main').innerHTML+="<h3>[<a href='#' onclick='getCatsSTAGE1()'>Forum</a>][<a href='#cat="+catid+"' onclick='getThemesSTAGE1("+catid+",\""+catname+"\")'>"+catname+"</a>]</h3>";
		//Add create theme option to footer of document
		document.getElementById('footer').innerHTML="<input type='text' id='usertheme'><input type='button' value='Create new theme' onclick='CreateThemeInCat()'>"+document.getElementById('footer').innerHTML;
		parseThemes(data);
	}
	//Parse and display themes from cat
	function parseThemes(data) {
		var reg=/(\d+)#(.+)#(.+)#(\d+)/; //themes reg exp
		var data_str=data.split("\n");  //split themes by lines
		var users_in_cat=new Array();  //array for users who create themes
		for ( theme in data_str ) {
			if(data_str[theme]=="") break; //if no data on line, stop
			var arr=reg.exec(data_str[theme]);
			document.getElementById('main').innerHTML+="<table border=\"0\" width=\"100%\"><tr bgcolor=\"#c9f2f2\"><td><a href='#cat="+catid+"&theme="+arr[1]+"' onclick='getMessagesSTAGE1("+arr[1]+",\""+arr[2]+"\")'>"+arr[2]+"</a> <br>  <span class=\"uid-"+arr[4]+"\"> ["+arr[4]+"]</span> <span style='font-size: 10px;'> <a href='#cat="+catid+"' onclick='removeTheme("+arr[1]+")'>Remove</a> ["+arr[3]+"]</span> </td></tr></table>";
			users_in_cat.push(arr[4]); //push creator to array
		}
		users_in_cat=removeDuplicateElement(users_in_cat); //remove dublicats
		$.get('fengine.php?login='+login+'&password='+password+'&req=users&uids='+users_in_cat.join(","), function(data) {
			DisplayUsers(data); //jQuery display users
		});
	}
	//Create theme in this cat
	function CreateThemeInCat() {
		theme=document.getElementById('usertheme').value;
		$.get('fengine.php?login='+login+'&password='+password+"&req=theme2cat&catid="+catid+"&themename="+theme, function(data) {
			getThemesSTAGE1(catid, catname);
		});
	}
	//Remove theme by id
	function removeTheme(id) {
		$.get('fengine.php?login='+login+'&password='+password+'&req=rmtheme&themeid='+id, function(data) {
			getThemesSTAGE1(catid,catname); //Refresh cat on screen
		});
	}
//----------------------------------------------------------------Themes
//Messages--------------------------------------------------------------
	function getMessagesSTAGE0(cid,tid) {
		$.get('fengine.php?login='+login+'&password='+password+"&req=catname&catid="+cid, function(data) {
			catid=cid;
			catname=data;
			$.get('fengine.php?login='+login+'&password='+password+"&req=themename&themeid="+tid, function(data) {
				getMessagesSTAGE1(tid, data);
			});
		});
	}
	//Get messages from theme
	function getMessagesSTAGE1(i, name) {
		ActualUrl="#cat="+catid+"&theme="+i;
		footer();
		themeid=i; //set current theme id
		themename=name; //set current theme name
		$.get('fengine.php?login='+login+'&password='+password+"&req=messages&themeid="+i, function(data) {
			getMessagesSTAGE2(data);
		});
	}
	//Prepare space for messages
	function getMessagesSTAGE2(data) {
		clearMain();
		document.getElementById('main').innerHTML+="<h3>[<a href='#' onclick='getCatsSTAGE1()'>Forum</a>][<a href='#cat="+catid+"' onclick='getThemesSTAGE1("+catid+",\""+catname+"\")'>"+catname+"</a>][<a href='#cat="+catid+"&theme="+themeid+"' onclick='getMessagesSTAGE1("+themeid+",\""+themename+"\")'>"+themename+"</a>] </h3>";
		//text box for message
		document.getElementById('footer').innerHTML="<textarea rows=10 cols=80 id='usertext'></textarea><br><input type='button' value='send' onclick='SendMessageToTheme()'>"+document.getElementById('footer').innerHTML;
		parseMessages(data);
	}
	//Parse recieved data
	function parseMessages(data) {
		var reg=/(\d+)#(.+)#(.+)#(.+)/; //message reg exp
		var data_str=data.split("\n"); //split messages by lines
		var users_in_cat=new Array(); //array for writers in theme
		for ( theme in data_str ) {
			if(data_str[theme]=="") break;
			var arr=reg.exec(data_str[theme]);
			//Smilles
			text=arr[4].replace(/\=\)/g,"<img src='http://www.openclipart.org/image/25px/svg_to_png/face-smile.png'>");
			text=text.replace(/\=D/g,"<img src='http://www.openclipart.org/image/25px/svg_to_png/face-grin.png'>");
			
			document.getElementById('main').innerHTML+="<table border=1 width='100%' height=100><tr><td width='100' align='center'><span class=\"uid-"+arr[2]+"\"> ["+arr[2]+"]</span> </td><td style='vertical-align: top;'><span style='font-size: 10px;'> <a href='"+ActualUrl+"' onclick='removeMessage("+arr[1]+")'>Remove</a> <a href='"+ActualUrl+"' onclick='editMessage("+arr[1]+")'>Edit</a> "+arr[3]+"</span><hr><span id='message-"+arr[1]+"'>"+text+"</span></td></tr></table>";
			users_in_cat.push(arr[2]); //add author to array 
		}
		users_in_cat=removeDuplicateElement(users_in_cat);
		$.get('fengine.php?login='+login+'&password='+password+'&req=users&uids='+users_in_cat.join(","), function(data) {
			DisplayUsers(data); //jQuery display users
		});
	}
	//Edit message by id
	function editMessage(id) {
		data=document.getElementById('message-'+id).innerHTML.replace(/<br>/g,"\n");
		document.getElementById('message-'+id).innerHTML="<textarea rows=10 cols=80 id='NEWusertext'></textarea><input type='button' value='Save' onclick='SaveEditMessage("+id+")'>";	
		document.getElementById('NEWusertext').value=data;	
	}
	function SaveEditMessage(id) {
		text=document.getElementById('NEWusertext').value;
		text=text.replace(/\n/g,"<br>"); //replace end lines by <br> tag
		$.get('fengine.php?login='+login+'&password='+password+"&req=editmess&messid="+id+"&text="+text, function(data) {
			getMessagesSTAGE1(themeid, themename);
		});
	}
	//Send message to current theme
	function SendMessageToTheme() {
		text=document.getElementById('usertext').value;
		text=text.replace(/\n/g,"<br>"); //replace end lines by <br> tag
		$.get('fengine.php?login='+login+'&password='+password+"&req=msg2theme&themeid="+themeid+"&text="+text, function(data) {
			getMessagesSTAGE1(themeid, themename);
		});
	}
	//Remove message by id
	function removeMessage(id) {
		$.get('fengine.php?login='+login+'&password='+password+'&req=rmmess&messid='+id, function(data) {
			getMessagesSTAGE1(themeid,themename)
		});
	}
//--------------------------------------------------------------Messages
//Profile---------------------------------------------------------------
function DisplayProfileSTAGE1(id) {
	ActualUrl="#profile="+id;
	footer();
	$.get('fengine.php?login='+login+'&password='+password+'&req=profile&uid='+id, function(data) {
		DisplayProfileSTAGE2(id,data);
	});
}
function DisplayProfileSTAGE2(id,data) {
	var reg=/(\d+)#(.+)#(.+)#(\d+)#(.*)#(.*)/;
	arr=reg.exec(data);
	//alert(arr[6]);
	if(arr[5]!="") {
		ava=arr[5];
	} else {
		ava="http://www.openclipart.org/image/100px/svg_to_png/acspike_male_user_icon.png";
	}
	if(id==0) {
		document.getElementById('main').innerHTML="<table border=0 width='100%'><tr><td width=100><img src='"+ava+"'></td><td><b>Name:</b><br><input type='text' id='name' value='"+arr[2]+"'><br><b>Login:</b><br>"+arr[3]+"<br><b>Group:</b><br><i>"+arr[4]+"</i><hr><input type='button' value='Save' onclick='SaveProfile()'><input type='button' value='Change Pass'></td><td><b>Description:</b><br><textarea id='description' cols='60' rows='5'>"+arr[6]+"</textarea><br><b>Avatar url:</b><br><input type='text' id='avaurl' value='"+ava+"' size='78'></td></tr></table>";
	} else {
		document.getElementById('main').innerHTML="<table border=0 width='100%'><tr><td width=100><img src='"+ava+"'></td><td><b>Name:</b><br>"+arr[2]+"<br><b>Login:</b><br>"+arr[3]+"<br><b>Group:</b><br><i>"+arr[4]+"</i></td><td><b>Description:</b><br><textarea id='desription' cols='60' rows='5'>"+arr[6]+"</textarea><br><b>Avatar url:</b><br>"+ava+"</td></tr></table>";
	}
}
function SaveProfile() {
	var name=document.getElementById('name').value;
	var ava=document.getElementById('avaurl').value;
	var desc=document.getElementById('description').value;
	$.get('fengine.php?login='+login+'&password='+password+'&req=saveprofile&name='+name+"&ava="+ava+"&desc="+desc, function(data) {
		//alert(data);
	});
}
//---------------------------------------------------------------Profile
//Common----------------------------------------------------------------
	//Clear center space
	function clearMain() {
		document.getElementById('main').innerHTML="";
	}
	//Refresh footer of page
	function footer() {
		document.getElementById('footer').innerHTML="<hr>Fengin FUI 0.002 by Alexus";
	}
	//Refresh header of page
	function header() {		
		document.getElementById('header').innerHTML+='<table border="0" bgcolor="#98FB98" width="100%"><tr><td style="color: #696969;"><a href="#" onclick="getCatsSTAGE1()">FEngine.</a> Welcome <a href="#profile=0" onclick="DisplayProfileSTAGE1(0)">'+login+'</a>. <a href="#login" onclick=\'loginSTAGE1()\' >Exit or Login</a></td></tr></table>';		
	}
	//Remove duplicates from array
	function removeDuplicateElement(arrayName) {
        var newArray=new Array();
        label:for(var i=0; i<arrayName.length;i++ ) {  
			for(var j=0; j<newArray.length;j++ ){
				if(newArray[j]==arrayName[i]) 
				continue label;
			}
			newArray[newArray.length] = arrayName[i];
        }
        return newArray;
    }
    //Display users from current page
	function DisplayUsers(data) {
		//alert(data);
		var reg=/(\d+)#(.+)#(.*)/;
		var data_str=data.split("\n");
		for ( nick in data_str ) {
			if(data_str[nick]=="") break;
			var arr=reg.exec(data_str[nick]);
			if(arr[3]!="") {
				tava=arr[3];
			} else {
				tava="http://www.openclipart.org/image/100px/svg_to_png/acspike_male_user_icon.png";
			}
			if(document.location.hash=="#cat="+catid) {
				$(".uid-"+arr[1]).html("<a href='#profile="+arr[1]+"' onclick='DisplayProfileSTAGE1("+arr[1]+")'>["+arr[2]+"]</a>");
			} else {
				$(".uid-"+arr[1]).html("<a href='#profile="+arr[1]+"' onclick='DisplayProfileSTAGE1("+arr[1]+")'><img src='"+tava+"'><br>["+arr[2]+"]</a>");
			}
		}
	}
	function OpenPage() {
		var reg1=/#cat=(\d+)$/;
		var reg2=/#cat=(\d+)&theme=(\d+)$/;
		var profile=/#profile=(\d+)$/;
		if(document.location.hash=="#login") {
			loginSTAGE1();
		} else if(document.location.hash=="#register") {
			regSTAGE1();
		} else if((arr=profile.exec(document.location.hash))!=null) {
			DisplayProfileSTAGE1(arr[1]);
		} else if((arr=reg1.exec(document.location.hash))!=null) {
			getThemesSTAGE0(arr[1]);
		} else if((arr=reg2.exec(document.location.hash))!=null) {
			getMessagesSTAGE0(arr[1],arr[2]);
		} else {
			getCatsSTAGE1();
		}
	}
	function FowBack() {
		if(ActualUrl!=document.location.hash) {
			OpenPage();
		}
	}
//----------------------------------------------------------------Common	
	//Start initian fucntions
	function init() {
		header(); //display header
		OpenPage();
		ActualUrl=document.location.hash;
		setInterval('FowBack()', 300);		
	}

	</script>
</head>

<body onload="init();" bgcolor="#ffffff">
<center>
<table border="0" width="800" bgcolor="#E0FFFF">
	<tr>
		<td> 
<div id="header"></div>
<div id="main"></div>	
<div id="footer"></div>
</td>
	</tr>
</table>
</center>
</body>

</html>
